昨天先把第一版的網站部屬上去之後，
我們可以再來做一點額外的功能！

今天可以來嘗試一個按讚的小功能，
雖然這功能看似簡單，卻也是需要很多小技巧的！

按讚是多對多的關聯，
之前做了一個　user 跟 article　的一對多判斷是屬於誰的文章，
但多對多又是另一個故事了，多對多的關聯就是，
我們會使用第三方表格，紀錄 user 和 article 之間的按讚關係

1. V 的 show 建立 一個讚的 a 連結
2. 建立 stimulus , rails 6 要先安裝 stimulus
   rails 7預設安裝好了 ,可以直接執行

rails g stimulus like 
   會生出
=> like_controller.js 

3. 用 connect 試印東西,
   connect是一掛上去就會馬上觸發的方法
   所以我們可以先試印一下１２３，看有沒有正確掛上控制器

 connect(){
	console.log(123);
}

在讚的a上面加 data-controller

<a herf="#" data-controller="hello" >讚</a>

//多掛一層可以做比較多控制 ↓

<div data-controller="hello">
 <a herf="#">讚</a>
<div>

讚的 a 上面加 data-action

<div data-controller="hello">
 <a herf="#" data-action="click->like#toggle">讚</a>
<div>               //當聽到click事件，就觸發toggle方法

4. 我們先把 targets 給掛上

  static targets = ["likebtn"];

5. 然後在like_controller.js 建立 toggle 方法
   這裡我們一樣先掛一個 console.log 測試一下，
   是不是監聽到點擊事件就會執行 toggle 這個方法，

toggle(e){
 console.log(123)
}

如果有成功印出123的話就沒問題了
接著我們可以寫出後面的判斷

  toggle(e) {
    e.preventDefault();

    // API
    const url = `/api/v1/articles/${this.id}/like`;
    const token = document.querySelector("meta[name=csrf-token]").content;
    fetch(url, {
      method: "PATCH",
      headers: {
        "X-CSRF-Token": token,
      },
    })
      .then((resp) => {
        return resp.json();
      })
      .then(({ liked }) => {
        if (liked) {
          this.likebtnTarget.textContent = "已讚";
        } else {
          this.likebtnTarget.textContent = "未讚";
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

6. 接著我們回去剛剛的 connect()
   們要設定一下在載入這頁面時，這個讚預設的狀態

  connect() {
    const { id, liked } = this.element.dataset;
    this.id = id;

    if (liked == "true") {
      this.likebtnTarget.textContent = "已讚";
    } else {
      this.likebtnTarget.textContent = "未讚";
    }
  }